<template>
  <!-- <ul class="todo-main">
    <li v-for="(todo, index) in todos" :key="todo.id">
      <label>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="handleCheck(todo.id)"
        />
     
        <!-<input type="checkbox" v-model="todo.done"/> -->
        <!-- <input
          @blur="handleBlur(todo, $event)"
          ref="inputtit"
          type="text"
          :value="todo.title"
          v-show="todo.isEdit"
        />
        <span v-show="!todo.isEdit">{{ todo.title }}</span>
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
      <button class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
  </ul> --> 
    <ul class="todo-main">
    <li v-for="(todo, index) in todos" :key="todo.id">
      <label>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="handleCheck(index)"
        />
        
       
    <input
          @blur="handleBlur(todo,index, $event)"
          ref="inputtit"
          type="text"
          :value="todo.title"
          v-show="todo.isEdit"
        />
        <span v-show="!todo.isEdit">{{ todo.title }}</span>
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo,index)">删除</button>
      <button class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
  </ul> 
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyList",
  props: ["todos"],

  setup(props, context) {
    const handleEdit = (todo) => {
      todo.isEdit = true;
    };
    //勾选or取消勾选
    // const handleCheck = (id) => {
    //   //通知App组件将对应的todo对象的done值取反
    //   // this.checkTodo(id)
    //   bus.emit("checktodo", id);
    // };
        const handleCheck = (index) => {
      //通知App组件将对应的todo对象的done值取反
      // this.checkTodo(id)
   context.emit("checktodo",index);
    };
    const handleDelete = (item,index) => {
      if (confirm(`确定删除${item.title}吗？`)) {
        //通知App组件将对应的todo对象删除
        context.emit("delTodo", index);
        // bus.emit("deletetodo", id);
      }
    };
    // const handleDelete = (id) => {
    //   if (confirm("确定删除吗？")) {
    //     //通知App组件将对应的todo对象删除
    //     bus.emit("deletetodo", id);
    //   }
    // };
        const handleBlur = (todo,index, e) => {
      todo.isEdit = false;
      if (!e.target.value.trim()) return alert("输入不能为空！");
      let data = {
     index,
        title: e.target.value,
      };
    context.emit("updateTodo", data);
    };
    // const handleBlur = (todo, e) => {
    //   todo.isEdit = false;
    //   if (!e.target.value.trim()) return alert("输入不能为空！");
    //   let data = {
    //     id: todo.id,
    //     title: e.target.value,
    //   };
    // context.emit("updateTodo", data);
    // };
    
    return { handleEdit, handleBlur, handleDelete, handleCheck };
  },
});
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
.todo-enter-active {
  animation: atguigu 0.5s linear;
}

.todo-leave-active {
  animation: atguigu 0.5s linear reverse;
}
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #ddd;
}

li:hover button {
  display: block;
}
</style>
